<%--
  Created by IntelliJ IDEA.
  User: banddong
  Date: 2020/8/16
  Time: 16:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <%--base标签必须下载bead标签内--%>
    <%--http://localhost:8088/atcrowdfunding02_admin_webui_war/test/ssm.html
    localhost = ${pageContext.request.serverName}
    8088 = ${pageContext.request.serverPort}
    atcrowdfunding02_admin_webui_war = ${pageContext.request.contextPath}
    后面加 / 是为了每个请求不用加 /
    --%>
    <base href="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/"/>

    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#bt1").click(function () {
                $.ajax({
                    "url": "send/array/one.html",         //请求目标资源地址
                    "type": "post",                      //请求方式
                    "data": {                            //要发送的请求参数
                        "array": [5, 8, 12]
                    },
                    "dataType": "text",                  //如何对待服务端返回的数据
                    "success": function (response) {     //服务端成功处理请求否调用的回调函数
                        alert(response);                //response：响应体
                    },
                    "error": function (response) {       //服务端处理失败请求否调用的回调函数
                        alert(response);
                    }
                });
            });

            $("#bt2").click(function () {
                $.ajax({
                    "url": "send/array/two.html",    //请求目标的资源路径
                    "type": "post",                  //请求方式
                    "data": {                        //要发送的请求体
                        "array[0]": 21,
                        "array[1]": 22,
                        "array[2]": 23
                    },
                    "dataType": "text",              //如何对待服务端返回的数据
                    "success": function (response) { //服务端成功处理请求后调用的回调函数
                        alert(response);            //response：响应体
                    },
                    "error": function (response) {   //服务端处理请求失败调用的回调函数
                        alert(response);
                    }
                });
            });

            //compose
            $("#bt3").click(function () {

                //准备发要发送的数据
                var array = [3, 5, 8];
                console.log(array.length);
                //将数据转换为JSON字符串
                var requestBody = JSON.stringify(array);

                $.ajax({
                    "url": "send/array/three.html",  //请求目标资源路径
                    "type": "post",                   //请求方式
                    "contentType": "application/json;charset=UTF-8", //设置请求体内容类型
                    "data": requestBody,              //请求体
                    "dataType": "text",               //如何对待服务端返回的数据
                    "success": function (response) {  //服务端处理成功后调用的回调函数
                        alert(response);  //response：响应体
                    },
                    "error": function (response) { //服务端处理失败请求调用的回调函数
                        alert(response);
                    }

                });
            });

            //复杂的Ajax请求
            $("#bt4").click(function () {

                //准备发送的数据
                var student = {
                    "stuId": 1,
                    "stuName": "石原",
                    "address": {
                        "province": "河南省",
                        "city": "商丘市",
                        "streed": "城关区"
                    },
                    "subjectList": [
                        {
                            "subjectName": "语文",
                            "subjectScore": 68
                        },
                        {
                            "subjectName": "数学",
                            "subjectScore": 89
                        }
                    ],
                    "map": {
                        "k1": "v1",
                        "k2": "v2"
                    }
                };

                //将要发送的JSON数据转换为JSON字符串
                var responseBody = JSON.stringify(student);

                //发送请求
                $.ajax({
                    "url": "send/compose/object.json",
                    "type": "post",
                    "data": responseBody,
                    "contentType": "application/json;charset=UTF-8",
                    "dataType": "json",
                    "success": function (response) {
                        console.log(response);
                    },
                    "error": function (response) {
                        console.log(response);
                    }

                });
            });
            //layer弹层组件
            $("#bt5").click(function () {
                layer.msg("Layer 弹窗小组件");
                // alert("123");
            });


        });


    </script>


</head>
<body>
<%--<a href="${pageContext.request.contextPath}/test/ssm.html">测试SSM整合环境</a>--%>
<a href="test/ssm.html">测试SSM整合环境</a>
<br/>
<br/>
<br/>
<button id="bt1">Send[1,8,12] One</button>
<br/>
<br/>
<br/>
<button id="bt2">Send[2,8,12] Two</button>
<br/>
<br/>
<br/>
<button id="bt3">Send[3,8,12] Three</button>
<br/>
<br/>
<br/>
<button id="bt4">Send Compose Object</button>
<br/>
<br/>
<br/>
<button id="bt5">Layer 弹层组件</button>


</body>
</html>
